<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>员工查询</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
	<style>
		*{margin:0;padding:0;}
		li{list-style: none;}
		body{
			position: relative;
		}
		.back{
			background: rgb(0,0,0,.3);
			position: absolute;
			display: none;
		}
		.wrap{
			position: fixed;
			transform: translate(-50%,-50%);
			left:50%;
			top: 50%;
			width: 450px;
			height: 500px;
			background-color:#fff;
		}
		.wrap li{
			margin-top:20px;
		}
		.wrap span{
			font-size: 20px;
			margin-left: 20px;
		}
		.que{
			position: absolute;
			top:90%;
			left:85%;
		}
		.box{
			display: none;
		}
		.guan{
			position: absolute;
			top:0;
			right:0;
		}
		.cha{
			height: 32px;
		}
	</style>
</head>
<body>
	<div class="back">
		<div class="wrap">
			<ul>
				<li><span>姓名：</span><input type="text" id="name"></li>
				<li><span>性别：</span><input type="radio" name="1" value="男" id="sex" checked>男<input type="radio" name="1" value="女" id="sex">女</li>
				<li><span>出生年月：</span><input type="text" id="date"></li>
				<li><span>所属部门：</span><input type="text" id="department"></li>
				<li><span>薪资：</span><input type="text" id="pay"></li>
				<li><span>手机：</span><input type="text" id="mobile"></li>
			</ul>
			<button type="button" class="btn btn-primary que">确定</button>
			<button class="guan">关闭</button>
		</div>
	</div>
	<button type="button" class="btn btn-primary newB">+新建</button>
	<input type="text" class="cha"><button class="btn btn-primary" id="chaxun">查询</button>
	<table class="table table-striped">
		<thead>
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>性别</th>
				<th>出生日期</th>
				<th>所属部门</th>
				<th>薪资</th>
				<th>手机</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr class="box">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>
					<div id="tem">
						<button id="edit">编辑</button>
						<button id="delete">删除</button>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
	<script src="jquery.min.js"></script>
	<script>
		var str;
		$(".back").css({
			width:$(document).width(),
			height:$(document).height()
		})
		$.ajax({
			url:"http://127.0.0.1:81/getdata",
			success(data){
				JSON.parse(data).forEach(function(item){
					var newbox = $(".box").clone(true)
					newbox.addClass("aa")
					newbox.removeClass("box")
					$("tbody").append(newbox)
					newbox.find("td").eq(0).html(item.id)
					newbox.find("td").eq(1).html(item.name)
					newbox.find("td").eq(2).html(item.sex)
					newbox.find("td").eq(3).html(item.date)
					newbox.find("td").eq(4).html(item.department)
					newbox.find("td").eq(5).html(item.pay)
					newbox.find("td").eq(6).html(item.mobile)
				})
			},
			error(){
				alert("查询失败")
			}
		})
		$(".guan").click(function(){
			var back = $(".back")
			back.css({
				display:"none"
			})
		})
		$(".newB").click(function(){
			str=true;
			var back = $(".back")
			back.css({
				display:"block"
			})
		})
		$(".que").click(function(){
			var back = $(".back")
			back.css({
				display:"none"
			})
			if($("#sex")[0].checked){
				sex="男"
			}else{
				sex="女"
			}
			if(str){
				$.ajax({
				url:"http://127.0.0.1:81/addData",
				success(data){
					$(".aa").remove()
					JSON.parse(data).forEach(function(item){
						var newbox = $(".box").clone(true)
						newbox.addClass("aa")
						newbox.removeClass("box")
						$("tbody").append(newbox)
						newbox.find("td").eq(0).html(item.id)
						newbox.find("td").eq(1).html(item.name)
						newbox.find("td").eq(2).html(item.sex)
						newbox.find("td").eq(3).html(item.date)
						newbox.find("td").eq(4).html(item.department)
						newbox.find("td").eq(5).html(item.pay)
						newbox.find("td").eq(6).html(item.mobile)
					})
				},
				error(){
					alert("添加失败")
				},
				data:{
					name:$("#name").val(),
					sex:sex,
					date:$("#date").val(),
					department:$("#department").val(),
					pay:$("#pay").val(),
					mobile:$("#mobile").val()
				}
				})
			}else{
				if($("#sex")[0].checked){
					sex="男"
				}else{
					sex="女"
				}
				$.ajax({
				url:"http://127.0.0.1:81/editData",
				success(data){
					$(".aa").remove()
					JSON.parse(data).forEach(function(item){
						console.log(item.sex)
						var newbox = $(".box").clone(true)
						newbox.addClass("aa")
						newbox.removeClass("box")
						$("tbody").append(newbox)
						newbox.find("td").eq(0).html(item.id)
						newbox.find("td").eq(1).html(item.name)
						newbox.find("td").eq(2).html(item.sex)
						newbox.find("td").eq(3).html(item.date)
						newbox.find("td").eq(4).html(item.department)
						newbox.find("td").eq(5).html(item.pay)
						newbox.find("td").eq(6).html(item.mobile)
					})
				},
				error(){
					alert("添加失败")
				},
				data:{
					id:id,
					name:$("#name").val(),
					sex:sex,
					date:$("#date").val(),
					department:$("#department").val(),
					pay:$("#pay").val(),
					mobile:$("#mobile").val()
				}
				})
			}
		})
		$("#delete").click(function(){
			var newtr = this.closest("tr")
			$.ajax({
				url:"http://127.0.0.1:81/deleteData",
				success(data){
					newtr.remove()
					// alert("删除成功")
				},
				data:{
					id:$(this.closest("tr")).find("td").eq(0).html()
				}
			})
		})
		$("#edit").click(function(){
			str=false;
			var back = $(".back")
			back.css({
				display:"block"
			})
			id = $(this.closest("tr")).find("td").eq(0).html()
			var name = $("#name").val($(this).closest("tr").find("td").eq(1).html())
			var sex = $("#sex").val($(this).closest("tr").find("td").eq(2).html())
			var date = $("#date").val($(this).closest("tr").find("td").eq(3).html())
			var department = $("#department").val($(this).closest("tr").find("td").eq(4).html())
			var pay = $("#pay").val($(this).closest("tr").find("td").eq(5).html())
			var mobile = $("#mobile").val($(this).closest("tr").find("td").eq(6).html())
		})
		$("#chaxun").click(function(){
			$.ajax({
				url:"http://127.0.0.1:81/queryData",
				method:"GET",
				async:true,
				success(data){
					$(".aa").remove()
					JSON.parse(data).forEach(function(item){
						console.log(item)
						console.log(item.sex)
						var newbox = $(".box").clone(true)
						newbox.addClass("aa")
						newbox.removeClass("box")
						$("tbody").append(newbox)
						newbox.find("td").eq(0).html(item.id)
						newbox.find("td").eq(1).html(item.name)
						newbox.find("td").eq(2).html(item.sex)
						newbox.find("td").eq(3).html(item.date)
						newbox.find("td").eq(4).html(item.department)
						newbox.find("td").eq(5).html(item.pay)
						newbox.find("td").eq(6).html(item.mobile)
					})
				},
				data:{
					id:$(".cha").val(),
				},
			})
		})
	</script>
</body>
</html>